<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index XHR</title>
</head>
<body>

    <form id="form" action="/login" method="POST">
        <input type="text" name="name" id=""><br />
        <input type="text" name="pwd" id=""><br />
        <button type="submit">提交</button>
    </form>

    <script>

        var form = document.getElementById('form')
        form.onsubmit = function() {
            var xhr = new XMLHttpRequest();
            let param = {
                name: form.name.value,
                pwd: form.pwd.value
            }
            const encodeParam = function(param) {
                let a = []
                for (let key in param) {
                    a.push(`${key}=${param[key]}`)
                }
                return a.join('&')
            }
            /*
                // 连接
                xhr.open(
                    'POST',
                    '/login',
                    true
                )
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
                // 发送请求
                xhr.send(encodeParam(param))
            */
            //    GET

            xhr.open(
                'GET',
                '/login?'+encodeParam(param),
                true
            )
            xhr.send()

            // 接受返回值
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    console.log(
                        xhr
                    )
                }
            }
            return false;
        }


    </script>
</body>
</html>